import CanvasImageLayerRenderer from 'ol/renderer/canvas/ImageLayer';
import { fromUserExtent } from 'ol/proj';
import { toString, makeScale, makeInverse, apply as applyTransform } from 'ol/transform';
import { isEmpty, containsExtent, getIntersection, intersects, containsXY } from 'ol/extent';
import {
    getBottomLeft,
    getBottomRight,
    getTopLeft,
    getTopRight,
} from 'ol/extent';
var ViewHint = {
    ANIMATING: 0,
    INTERACTING: 1
};

class VideoRenderer extends CanvasImageLayerRenderer {
    constructor(videoLayer) {
        console.log(videoLayer);
        super(videoLayer)
        this.__VDOM = videoLayer.__VDOM
    }

    render(frameState, target) {
        if (this.prepareFrame(frameState)) {
            return this.renderFrame(frameState, target);
        }
    }

    // 准备渲染
    prepareFrame(frameState) {
        var layerState = frameState.layerStatesArray[frameState.layerIndex];
        var viewState = frameState.viewState;
        var hints = frameState.viewHints;
        var renderedExtent = frameState.extent;
        if (layerState.extent !== undefined) {
            renderedExtent = getIntersection(renderedExtent, fromUserExtent(layerState.extent, viewState.projection));
        }
        if (!hints[ViewHint.ANIMATING] && !frameState.animate && !hints[ViewHint.INTERACTING] && !isEmpty(renderedExtent)) {
            return true;
        }
        else {
            return false;
        }
    }
    // 渲染
    renderFrame(frameState, target) {
        var layerState = frameState.layerStatesArray[frameState.layerIndex];
        var pixelRatio = frameState.pixelRatio;
        var viewState = frameState.viewState;
        var renderedExtent = layerState.extent;
        var size = frameState.size;
        var width = Math.round(size[0] * pixelRatio);
        var height = Math.round(size[1] * pixelRatio);
        // set forward and inverse pixel transforms
        makeScale(this.pixelTransform, 1 / pixelRatio, 1 / pixelRatio);
        makeInverse(this.inversePixelTransform, this.pixelTransform);
        var canvasTransform = toString(this.pixelTransform);
        this.useContainer(target, canvasTransform, layerState.opacity);
        var context = this.context;
        var canvas = context.canvas;
        if (canvas.width != width || canvas.height != height) {
            canvas.width = width;
            canvas.height = height;
            if (canvas.style.transform !== canvasTransform) {
                canvas.style.transform = canvasTransform;
            }
        }
        else if (!this.containerReused) {
            context.clearRect(0, 0, width, height);
        }
        // clipped rendering if layer extent is set
        var clipped = false;
        if (layerState.extent) {
            var layerExtent = fromUserExtent(layerState.extent, viewState.projection);
            clipped =
                !containsExtent(layerExtent, frameState.extent) &&
                intersects(layerExtent, frameState.extent);
            if (clipped) {
                this.clipUnrotated(context, frameState, layerExtent);
            }
        }
        this.preRender(context, frameState);

        const topLeft = getTopLeft(renderedExtent);
        const topRight = getTopRight(renderedExtent);
        const bottomRight = getBottomRight(renderedExtent);
        const bottomLeft = getBottomLeft(renderedExtent);

        applyTransform(frameState.coordinateToPixelTransform, topLeft);
        applyTransform(frameState.coordinateToPixelTransform, topRight);
        applyTransform(frameState.coordinateToPixelTransform, bottomRight);
        applyTransform(frameState.coordinateToPixelTransform, bottomLeft);

        const inverted = this.inversePixelTransform;
        applyTransform(inverted, topLeft);
        applyTransform(inverted, topRight);
        applyTransform(inverted, bottomRight);
        applyTransform(inverted, bottomLeft);
        //  绘制整个图像 迁移至 正确的 extent的位置
        context.drawImage(this.__VDOM, 0, 0, this.__VDOM.videoWidth, this.__VDOM.videoHeight, topLeft[0], topLeft[1], topRight[0] - topLeft[0], bottomRight[1] - topRight[1]);
        this.postRender(context, frameState);
        if (clipped) {
            context.restore();
        }
        if (canvasTransform !== canvas.style.transform) {
            canvas.style.transform = canvasTransform;
        }
        return this.container;
    };
}

export default VideoRenderer;